<template>

    <div class="theme javaSE">
      <h3 style="margin-bottom: 10px;">JAVA SE基础模块</h3>
      <p>这是有关javaSE基础模块的论坛，该论坛搜集了有关javaSE基础模块的所有帖子，希望你能找到
        问题的答案，并且在允许的范围内帮助其他人……
        <el-link size="large" type="primary" @click="router.push('/particular/theme?themeCode=100')">点击进入</el-link>
      </p>
      <p class="info">该模块已经搜集了{{ count.at(0) }}篇帖子</p>
      <p class="author">近期<el-avatar size="small"><User /></el-avatar>发布了帖子</p>
    </div>
    <div class="theme javaSE">
      <h3 style="margin-bottom: 10px;">JAVA EE基础模块</h3>
      <p>这是有关javaEE基础模块的论坛，该论坛搜集了有关javaEE基础模块的所有帖子，希望你能找到
        问题的答案，并且在允许的范围内帮助其他人……<el-link size="large" type="primary" @click="router.push('/particular/theme?themeCode=200')">点击进入</el-link>
      </p>
      <p class="info">该模块已经搜集了{{ count.at(1) }}篇帖子</p>
      <p class="author">近期<el-avatar size="small"><User /></el-avatar>发布了帖子</p>
  </div>
  <div class="theme javaSE">
      <h3 style="margin-bottom: 10px;">spring框架</h3>
      <p>这是有关spring的论坛，该论坛搜集了有关spring框架基础模块的所有帖子，希望你能找到
        问题的答案，并且在允许的范围内帮助其他人……<el-link size="large" type="primary" @click="router.push('/particular/theme?themeCode=300')">点击进入</el-link>
      </p>
      <p class="info">该模块已经搜集了{{ count.at(2) }}篇帖子</p>
      <p class="author">近期<el-avatar size="small"><User /></el-avatar>发布了帖子</p>
  </div>
  <div class="theme javaSE">
      <h3 style="margin-bottom: 10px;">spring框架</h3>
      <p>这是有关spring的论坛，该论坛搜集了有关spring框架基础模块的所有帖子，希望你能找到
        问题的答案，并且在允许的范围内帮助其他人……<el-link size="large" type="primary"  @click="router.push('/particular/theme?themeCode=400')">点击进入</el-link>
      </p>
      <p class="info">该模块已经搜集了{{ count.at(3) }}篇帖子</p>
      <p class="author">近期<el-avatar size="small"><User /></el-avatar>发布了帖子</p>
  </div>
  <div class="theme javaSE">
      <h3 style="margin-bottom: 10px;">spring框架</h3>
      <p>这是有关spring的论坛，该论坛搜集了有关spring框架基础模块的所有帖子，希望你能找到
        问题的答案，并且在允许的范围内帮助其他人……<el-link size="large" type="primary" @click="router.push('/particular/theme?themeCode=500')">点击进入</el-link>
      </p>
      <p class="info">该模块已经搜集了{{ count.at(4) }}篇帖子</p>
      <p class="author">近期<el-avatar size="small"><User /></el-avatar>发布了帖子</p>
  </div>
  <div class="theme javaSE">
      <h3 style="margin-bottom: 10px;">spring框架</h3>
      <p>这是有关spring的论坛，该论坛搜集了有关spring框架基础模块的所有帖子，希望你能找到
        问题的答案，并且在允许的范围内帮助其他人……<el-link size="large" type="primary" @click="router.push('/particular/theme?themeCode=600')">点击进入</el-link>
      </p>
      <p class="info">该模块已经搜集了{{ count.at(5) }}篇帖子</p>
      <p class="author">近期<el-avatar size="small"><User /></el-avatar>发布了帖子</p>
  </div>

</template>

<script setup>
import router from '@/router';
import axios from 'axios';
import { ElMessage } from 'element-plus';
import { onMounted, ref } from 'vue';

//一单加载页面，就调用该方法
onMounted(()=>{getCount()});

//定义变量存放阻塞对嘞
const count = ref([]);
//向后端发送请求，并接收数据
function getCount() {
  axios.get(BASE_URL+'/v1/article/count')
  .then((response)=>{
    if (response.data.code == 0) {
      ElMessage.success('欢迎您的到来');
      console.log(response.data.data);
      count.value = response.data.data;
    }
    else {
      ElMessage.error('查询失败，请售后再试');
    }
  });
}
</script>

<style>

.theme {
  margin: 10px 0;
  width: 100%;
  padding: 20px;
}

.theme h3 {
  color: orange;
  font-size: 1.2em;
  margin: 0;
  padding-bottom: 20px;
  border-bottom: 1px  solid #fff;
}

.theme p {
  color: aqua;
  font-size: 1.1em;
  margin: 10px 0;
}

.theme .info {
  color: aquamarine;
  font-size: 0.85em;
  font-style: italic;
  text-align: right;
}

.theme .author {
  font-size: 0.95em;
  text-align: right;
  color: blanchedalmond;
}
</style>